<template lang="pug">
//- div(style='padding: 40px 80px 40px 40px')
Row(type='flex')
  Col(span=24)
    Form(:model='formData', :label-width=60)
      FormItem(label='封面')
        CoverUploader(@on-upload='onCoverUpload')
      FormItem(label='标题')
        Input(v-model='formData.title')
      FormItem(label='副标题')
        Input(v-model='formData.subtitle', placeholder='副标题、关键词或简单描述等，可不填')
      FormItem(label='发布时间')
        DatePicker(type='datetime',format='yyyy-MM-dd',placeholder='选择时间',clearable='ture',style='width: 200px',v-model='Time')
      FormItem(label='摘要')
        Input(type='textarea', :rows=3, :maxlength=80, v-model='formData.abstract', placeholder='不超过80字')
      FormItem(label='分类')
        SelectCategory(module='article', :multiple='true', @change='setCategory')
      FormItem(label='内容')
        //- Input(v-model='formData.body', type='textarea', :rows=6)
        Editor(v-model='formData.body')
      FormItem(label='图册')
        GalleryUploader(v-model='formData.gallery')
      FormItem(label='置顶')
        i-switch(v-model='formData.sticky')
          Icon(type='android-done', slot='open')
          Icon(type='android-close', slot='close')
      FormItem.text-center
        Button(type='primary', @click='draft', :loading='loading1') 保存为草稿
        | &nbsp;&nbsp;
        Button(type='success', @click='publish', :loading='loading2') 发布
  //- Col(span=12)
    Affix(:offset-top=20)
      div.article-preview.pull-right
        h2 {{ formData.title }}
        div.ql-snow
          div.ql-editor(v-html='formData.body', style='padding: 0')
</template>

<script>
import CoverUploader from '@/components/CoverUploader'
import GalleryUploader from '@/components/GalleryUploader'
import SelectCategory from '@/components/SelectCategory'
import Editor from '@/components/UEditor'

import Api from '@/apis/article'
import store from '@/store'

export default {
  components: {
    CoverUploader,
    GalleryUploader,
    SelectCategory,
    Editor
  },
  data () {
    return {
      loading1: false,
      loading2: false,
      cover: '//placehold.it/600x400?text=+',
      formData: {
        cover: null,
        title: '',
        subtitle: '',
        abstract: '',
        body: '',
        group_id: store.state.app.id,
        category: [],
        gallery: [],
        published: true,
        sticky: false,
        created_timestamp: 0
      }
    }
  },
  computed: {
    Time: {
      get: function () {
        var myDate = new Date()
        function double (time) {
          if (time < 10)time = '0' + time
          return time
        }
        var formatDate = myDate.getFullYear() + '-' + double((myDate.getMonth() + 1)) + '-' + double(myDate.getDate())
        return formatDate
      },
      set: function (value) {
        var date = new Date(value.toString())
        if (isNaN(date.getFullYear()) || isNaN(date.getMonth()) || isNaN(date.getDate()) || isNaN(date.getHours()) || isNaN(date.getMinutes()) || isNaN(date.getSeconds())) {
          alert('日期错误')
        } else {
          this.formData.created_timestamp = date.getTime() / 1000
        }
      }
    }
  },
  methods: {
    validate () {
      return this.formData.title.trim() && this.formData.body
    },
    draft () {
      this.formData.published = false
      this.loading1 = true
      this.submit()
    },
    publish () {
      this.formData.published = true
      this.loading2 = true
      this.submit()
    },
    submit () {
      if (this.validate()) {
        // this.loading = true
        Api.postArticle(this.formData).then(() => {
          this.loading1 = false
          this.loading2 = false
          this.$router.push('/articles')
        })
      } else {
        this.loading1 = false
        this.loading2 = false
        this.$Message.error('data incomplete')
      }
    },
    handleUpload (file) {
      return false
    },
    onCoverUpload (file) {
      this.formData.cover = file.id
    },
    setCategory (items) {
      this.formData.category = items.map(item => ({
        id: item.value,
        name: item.label
      }))
    }
  }
}
</script>

<style lang="less">
.article-cover-uploader {

  .ivu-upload-select {
    width: 100%;
    // padding-bottom: 66.7%;
    // height: 0;
  }

  .uploader {
    width: 100%;
    // height: 0;
    padding: 20px 40px;
    // padding-bottom: 66.7%;
    border: 1px dotted #999;
    text-align: center;
    background-size: contain;
    background-repeat: no-repeat;
  }

}

.article-preview {
  // margin: 0 10px;
  padding: 10px;
  // height: 100%;
  width: 375px;
  height: 667px;
  overflow-y: scroll;
  border: 5px solid #eee;
}
</style>
